<template>
  <div class="home-wrap">
    <div class="video-container">
      <div class="overlay" :style="{ color: $store.state.app.themeColor }">
        <!--      <div class="overlay">-->
        <div class="homepage-title">
          <div class="title">{{ $t('index.title') }}</div>
          <p>{{ $t('index.subTitle') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'Welcome',
  components: {},
  mixins: [],
  data() {
    return {
      defaultGaiaRoute: '',
    }
  },
  computed: {
    ...mapGetters(['gaiaRoles', 'username', 'site']),
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        // hideSidebar: !this.sidebar.opened,
        hideSidebar: false,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        // mobile: this.device === 'mobile'
      }
    },
    gaiaRolesList() {
      return this.gaiaRoles.filter((item) => {
        return item.indexOf('gaia') > -1
      })
    },
    logoutUrl() {
      return `http://${window.location.host}/gaia/abplatform/Logout`
    },
  },
  mounted() {},
  methods: {
    ...mapActions(['fetchGaiaRole']),
    handleChangeSite() {
      // const hostName = this.site === 'us' ? 'dape.intra.didichuxing.com' : 'dape.intra.prox.com'
      // window.open(`http://${hostName}`)
    },
    handleGaiaClick() {
      if (!this.gaiaRoles.length) {
        this.$notify.error({
          title: '错误',
          message: '暂无权限，请联系管理员开通权限',
          duration: 2000,
          offset: 60,
        })
      }
    },
    handleClickOutside() {
      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
    },
    getInitialRoute() {
      if (!this.gaiaRoles) {
        this.fetchGaiaRole().then(() => {
          this.setGaiaRoute()
        })
        return
      }
      this.setGaiaRoute()
    },
    setGaiaRoute() {
      const firstGaiaRole = this.gaiaRoles[0] || ''
      const defaultGaiaRoute = settingGaiaRoute(firstGaiaRole)
      this.defaultGaiaRoute = defaultGaiaRoute
    },
  },
}
</script>

<style lang="less" scoped>
.home-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .video-container {
    width: 100%;
    height: 100%;
    .overlay {
      background: transparent;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      .header {
        z-index: 10;
        width: 100%;
        padding: 0 120px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding-top: 20px;
        .logo {
          img {
            width: 40px;
            height: 40px;
          }
          .logoinfo {
            display: inline-block;
            margin-top: -5px;
            span {
              color: #ffffff;
              font-size: 24px;
              font-weight: 500;
              color: white;
            }
            p {
              color: #ffffff;
              margin-top: -5px;
            }
          }
        }
        .avatar-container {
          // width: 100px;
          height: 27px;
          cursor: pointer;
          span {
            color: #935eff;
          }
          &-username {
            color: #935eff;
            padding-left: 10px;
            margin-left: 10px;
            // border-left: 1px solid #909399;
          }
          &-site {
            display: inline;
            svg {
              color: #909399;
            }
          }
        }
      }
      .homepage-title {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        padding-right: 110px;
        width: 100%;
        z-index: 1;
        .title {
          font-size: 46px;
          font-weight: bolder;
          text-align: center;
        }
        p {
          font-size: 24px;
          text-align: center;
        }
        .btn-wrapper {
          text-align: center;
          margin-top: 30px;
          .btn {
            box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            width: 140px;
            padding: 9px;
            margin-left: 0;
            border-radius: 25px;
            font-size: 20px;
            text-align: center;
            background-color: transparent;
            border: 1px solid white;
            color: white;
            font-family: Arial, Helvetica, sans-serif;
          }
          .btn:hover {
            background-color: rgba(255, 255, 255, 0.9);
            border-color: #625eff;
            background: linear-gradient(-135deg, #935eff, #625eff);
            text-shadow: none;
            cursor: pointer;
          }
          .link-type-router + .link-type-router {
            margin-left: 36px;
          }
        }
      }
    }
  }
}
</style>
